<template>
  <div>
    <RoleComponent ref="roleCompoenent" :isModalComponent="true"></RoleComponent>
    <div class="ops"> 
      <label class="tip"> 先选择，再保存 </label>
      <n-button type="info" @click="addRole()"> 选择 </n-button>
    </div>
    
    <div class="head">
      <label>已选择：</label>
      <n-tag type="info" v-for="r,index in roles" :key="index"  
          closable @close="deleteRole(index)">
          {{r.name}}
      </n-tag>
    </div>

    <n-divider />

  </div>
</template>

<script>
import { NTag, NDivider } from "naive-ui" 
import RoleComponent from '../role/role.vue'

export default {
  name: 'AdminRoleSelector',
  components: {
    NTag, NDivider, RoleComponent, 
  },
  data() {
    return {
      // 已选择的角色
      roles: []
    }
  },

  methods: {
      empty() { },
      // 添加选择的角色
      addRole() {
        if(!this.roles) {
          this.roles = []
        }

        let sels =  this.$refs.roleCompoenent.listSelectedDatas()
        if( !sels || sels.length==0) {
          return
        }

        let code_yet = this.roles.map(e => e.roleCode)
        let newSel = sels.filter(e => code_yet.indexOf(e.roleCode) == -1)
        if(newSel && newSel.length>0) {
          this.roles = this.roles.concat(newSel)
        }
        // console.log("this.roles", this.roles)
      },
      
      // 删除角色
      deleteRole(index) {
        this.roles.splice(index, 1)
      },
      
      // 外部获取选择的角色
      getRoles() {
        return this.roles
      },
      // 设置已选择的角色
      setRoles(newRoles){
        this.roles = newRoles
      }
  }
}
</script>

<style lang="scss" scoped>
.head{
  label{
    font-size: 1.1rem;
    color: #2c9511;
  }
  .n-tag{
    margin: 0px 2px;
  }
}
.ops{
  margin-top: 40px;
  text-align:right;

  .tip{
    color: #a90909d1;
  }
}
</style>
